<template>
	<view class="binding-list">
		<block  v-if="list.length > 0">
		<view class="binding-item" v-for="(item, index) in list" :key="index">
			<view class="item-header">
				<text class="house-name">{{ item.name }}</text>
				<text class="status-tag">绑定审核中</text>
			</view>
			<view class="item-body">
				<view @click="previewImage(item.pictureUrl)" class="info-row proof-row">
					<text class="label">产权证明：</text>
					<view class="u-flex u-flex-wrap " v-if="item.pictureUrl.length > 0">
						<image  v-for="(img, index) in item.pictureUrl" :key="index" class="proof-image" :src="img" mode="aspectFill"></image>
					</view>
					<block v-else>
						<text class="value">暂无产权证明</text>
					</block>
				</view>
				<view class="info-row">
					<text class="label">地址：</text>
					<text class="value">{{ setAddress(item.house) }}</text>
				</view>
				
				<view class="info-row">
					<text class="label">提交时间：</text>
				
					<text class="value">{{ item.applyDate }}</text>
				</view>
				<view class="info-row">
					<text class="label">房屋建筑面积：</text>
					<text class="value">{{ item.house.houseSize || "0" }}m²</text>
				</view>
			</view>
			</view>
		</block>
		<block v-else>
			<u-empty text="暂无绑定房屋" />
		</block>
	</view>
</template>

<script>
	export default {
		name: "binding-list",
		props: {
			list: {
				type: Array,
				default: () => []
			}
		},
		methods: {
			setAddress(item){
				let text=""
				if(item.areaInfo){
					text+=item.areaInfo
				}
				if(item.roomCode){
					text+=item.roomCode
				}
				return text
			},
			previewImage(url) {
				uni.previewImage({
					urls: url
				})
			}
		}
	}
</script>

<style scoped>
   
   .binding-list{
	margin-top: 30rpx;
   }
	.binding-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.item-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
	    
	}

	.house-name {
		font-weight: 500;
		font-size: 34rpx;
		color: #333333;
	}

	.status-tag {
		background-color: rgba(21, 214, 98, 0.102);
		color: rgba(21, 214, 98, 1);
		padding: 1rpx 8rpx;
		border-radius: 8rpx;
		font-size: 24rpx;
	}

	.item-body .info-row {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		line-height: 1.8;
		margin-top: 30rpx;
	}

	.item-body .label {
		color: #666;
		width: 200rpx;
		flex-basis: 215rpx;
	}

	.item-body .value {
		color: #333;
	}
	
	.proof-row {
		align-items: flex-start !important;
	}

	.proof-image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		margin-right: 10rpx;
		margin-block: 10rpx;
	}
</style> 